<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:HH="http://www.w3.org/1999/xhtml">
<!--这个是图书的详情页面，通过点击不同的书都可以进来-->
<head th:include="include :: header">
    <meta charset="utf-8">
    <title>商品详情页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
    .Ay-bottom-btn {
        width: 50%;
        float: left;
    }

    li {
        list-style: none;
        margin-top: 0.5em;
        height: 30%;
    }
</style>
self.location=document.referrer;
<body>
<header class="mui-bar mui-bar-nav">
    <a href="javascript:" onclick="history.go(-1);" class="mui-pull-left"><span style="font-size: 15px">返回</span></a>
    <h1 class="mui-title">预约图书信息</h1>
</header>
<div class="mui-content">

    <!--图书简要情况-->
    <div class="mui-card" style="margin: 0;">
        <!--内容区-->
        <div class="mui-card-content">
            <div style="float: left; width: 40%;">
                <img src="/img/about-zuixin-02.jpg" th:src="${books.bookImg}"
                     style="height: 120px;width: 100px;margin: 5px 10px"/>
            </div>
            <div style="float:left; width: 60%; text-align: left;">
                <ul>
                    <li>
						<span th:text="${books.bookName}"
                              style="font-size: 120%; margin-bottom: 0.5em; font-weight: bold; ">
							书名
						</span>
                    </li>
                    <li>
                        作者:
                        <span th:text="${books.author}" style="font-size: 100%;  color: #999999">
							作者
						</span>
                    </li>
                    <li>
                        数量:
                        <span style="color: #6D6D72;" th:text="${books.total}">
							1
						</span>
                    </li>
                    <li>
                        距你还有:
                        <span style="color: #6D6D72;" th:text="${count}">
							1
						</span>
                        人
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <!--图书漂流情况-->
    <ul class="mui-table-view" style="margin-top: 0.8em;">
        <li class="mui-table-view-cell">
            <span>图书漂流详情</span>
            <ul>
                <li>上一站：</li>
                <ul>
                    <li th:text="'昵称：'+${before.nickName}"></li>
                    <li th:text="'联系方式：'+${before.phone}"></li>
                    <li th:text="'地址'+${before.address}"></li>
                </ul>
            </ul>
            <ul>
                <li>下一站：</li>
                <ul>
                    <li th:text="'昵称：'+${next.nickName}"></li>
                    <li th:text="'联系方式：'+${next.phone}"></li>
                    <li th:text="'地址'+${next.address}"></li>
                </ul>
            </ul>
        </li>
    </ul>
    <div>
    </div>
    <nav th:style="'visibility:'+@{(${usering}==1?'visible':'hidden')}" >
        <a th:href="'/book/receivebook/'+${books.bookName}+'/'+${before.userId}" style=" bottom: 30px; width: 100%;height: 25px;">
            <button style="width: 100%" class="mui-btn mui-btn-yellow">接收图书</button>
        </a>
    </nav>
</div>

</body>

<div th:include="include::footer"></div>
<script src="/js/phone/mui.min.js"></script>
<script th:inline="javascript">
    function yuyue() {
        var a = [[${books.bookName}]];
        $.ajax({
            cache: false,
            type: "Get",
            url: "/iphone/bookyuyue/" + a,
            data: "",
            async: false,
            error: function (request) {
                parent.layer.alert("Connection error");
            },
            success: function (data) {
                if (data.code == 0) {
                    parent.layer.msg(data.msg);
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);

                } else {
                    parent.layer.alert(data.msg)
                }

            }
        });
    }
</script>
</html>